<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
   
</head>

<body>
    <!-- 头部模块 -->
    <header>
        <h1><span>网安数据大脑可视化平台</span></h1>

    </header>

    <div class="main">
        <!-- top5 -->
        <div class="top5">
            <a th:href="@{/page/venue_zh.html}">
                <button><span>授课地点分布</span></button>
            </a>


            <div class="top5-content">
                <ul align="center">
                    <li>
                        <a th:href="@{./page/venue_zh.html}">
                            <div class="cicle"></div>
                            <div class="li-content">
                                <span>综合楼</span>




                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="cicle"></div>
                        <div class="li-content">
                            <span> 数学楼</span>


                        </div>
                    </li>
                    <li>

                        <div class="cicle"></div>
                        <div class="li-content">
                            <span>文史楼</span>


                        </div>
                    </li>
                    <li>
                        <div class="cicle"></div>
                        <div class="li-content">
                            <span>其他</span>

                        </div>
                    </li>

                </ul>
            </div>
            <div>
                <a th:href="@{http://localhost:9080/index.html}" >
                    <button>数据中心</button>
                </a>

            </div>
        </div>

        <div class="total">
            <div class="data1">
                <span>本周课程数</span>
                <p>56841</p>
            </div>
            <div class="data2">
                <span>今日课程数</span>
                <p>1457104</p>
            </div>
            <div class="data3">
                <span>今日授课老师数</span>
                <p>564710</p>
            </div>
            <div class="data4">
                <span>今日上课学生数</span>
                <p>14504</p>
            </div>
            <div class="data5">
                <span>学生总数</span>
                <p>145004</p>
            </div>
            <div class="data6">
                <span>老师总数</span>
                <p>145004</p>
            </div>
            <canvas class="rain"></canvas>
            <canvas class="dashed"></canvas>
            <div class="sphere">
                <div class="sphere-bg"></div>
                <div class="sum">
                    <span>今日课程总数</span>
                    <p>8000</p>
                </div>
            </div>
            <div class="cicle3"></div>
            <div class="cicle4"></div>
            <div class="cicle5"></div>
            <div class="cicle6"></div>
            <div class="cicle7"></div>
            <div class="cicle8">
                <span>89%</span>
                <p>今日老师出勤率</p>
            </div>
            <div class="cicle9">
                <span>89%</span>
                <p>本周老师出勤率</p>
            </div>
            <div class="cicle10">
                <span>89%</span>
                <p>今日学生出勤率</p>
            </div>
            <div class="cicle11">
                <span>89%</span>
                <p>本周学生出勤率</p>
            </div>
        </div>


        <div class="analyse">
            <a href="">
                <button>
                    <span>今日课程</span>
                </button>
            </a>


            <marquee behavior="scroll" scrolldelay="1" hspace="100" direction="up" scrollamount="1" height="440" onmouseover="this.stop()" onmouseout="this.start()">

                <ul>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>数据结构</h5><br>
                        <em>昌老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>离散数学</h5><br>
                        <em>李老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>高等数学</h5><br>
                        <em>杭老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>Java程序设计</h5><br>
                        <em>昌老师</em>
                    </li>
                    <li>
                        <img th:src="@{/images/green.png}" alt="">
                        <h5>c语言</h5><br>
                        <em>杭老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>大学英语</h5><br>
                        <em>孙老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>计算机组成原理</h5><br>
                        <em>杭老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>Java程序设计</h5><br>
                        <em>昌老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>c语言</h5><br>
                        <em>李老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>大学英语</h5><br>
                        <em>昌老师</em>
                    </li>
                    <li>
                        <img th:src="@{/img/green.png}" alt="">
                        <h5>计算机组成原理</h5><br>
                        <em>李老师</em>
                    </li>
                </ul>
            </marquee>



        </div>


        <!-- 课程分析 -->
        <div class="sale">
            <ul>
                <li>

                    <div class="data">
                        <span>今日专业课</span>
                        <span>7500</span>
                    </div>
                    <div class="dayChart"></div>
                </li>
                <li>

                    <div class="data">
                        <span>本周专业课</span>
                        <span>32563</span>
                    </div>
                    <div class="weekChart"></div>
                </li>
                <li>

                    <div class="data">
                        <span>学期专业课</span>
                        <span>102563</span>
                    </div>
                    <div class="semesterChart"></div>
                </li>
            </ul>
        </div>

    </div>

    <div class="bottom">
        <a href="">
            <button class="button2"><h5><span>课堂直播</span></h5></button>
        </a>

    </div>

    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{js/echarts.min.js}"></script>
    <script type="text/javascript" th:src="@{js/classMain.js}"></script>
   
</body>


</html>